<template>
  <!-- 猜你喜欢区域 -->
  <div>
    <div>
      <h1 class="guess_h">猜你在追--从此列表视频进详情</h1>
    </div>

    <ul class="guess_ul">
      <li v-for="videos in guessdata" :key="videos.id" class="gli" @click="goVideoDetail(videos)">
        <img class="gimg" :src="videos.img" alt="" />
        <p class="gp1">{{ videos.name }}</p>
        <div class="gdiv">
          <p class="gp2">{{ videos.des }}</p>
          <span class="iconfont icon-yuandiancaidan"></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Guess",
  data() {
    return {
      videoInfo: [],
    };
  }, 
  methods:{
    goVideoDetail(canshu){
      this.$router.push({name:'DetailsVideo',query:{video:canshu}})
      console.log(canshu,"canshu")
    }
  },
  
  created() {
    this.$store.dispatch("LINK_GUESS_DATA","/home/guess")
  },
   computed:{
      guessdata(){
        return this.$store.state.GuessM.guess
      }
      
      // console.log(this.banners)
    }
};
</script>

<style scoped>
/* 猜你喜欢区域 */

.guess_h,
.hot_h {
  padding: 0 0 0.08rem 0.15rem;
  font-size: 0.18rem;
  /* background-color: rgb(184, 184, 184); */
}

.guess_ul {
  height: 1.22rem;
  /* background-color: rgb(248, 207, 207); */
  display: flex;
  overflow: auto;
  padding: 0 0.15rem 0.26rem 0.15rem;
}

.guess_ul::-webkit-scrollbar {
  display: none;
}

.guess_ul .gli {
  width: 1.55rem;
}

.gli:not(:last-child) {
  margin-right: 0.05rem;
}

.guess_ul .gli .gimg {
  width: 1.55rem;
  height: 0.88rem;
  background-color: rgb(191, 242, 255);
  border-radius: 0.05rem;
}

.guess_ul .gli .gp1 {
  font-size: 0.14rem;
  margin: 0.05rem 0 0.02rem 0;
}

.guess_ul .gli .gdiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.guess_ul .gli .gp2,
.icon-yuandiancaidan {
  font-size: 11px;
}
</style>
